<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加优惠券</title>
    <link rel="stylesheet" href="../../layui/css/layui.css"/>
    <script src="../../layui/layui.js"></script>
    <script>
        layui.use('element', function() {
            var $ = layui.jquery;  //加载jQuery模块
            var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        });
    </script>
</head>
<body>

 <form class="layui-form">
     <div class="layui-form-item">
         <div class="layui-input-inline">
             <input type="text" name="name" placeholder="优惠券名称" required lay-verify="required" class="layui-input" >
         </div>
         <div class="layui-input-inline">
             <input type="text" name="desc" placeholder="优惠券描述" required lay-verify="required" class="layui-input" >
         </div>
     </div>
     <div class="layui-form-item">
         <div class="layui-input-inline">
             <input type="text" name="collectExp"  class="layui-input" >
         </div>
         <div class="layui-input-inline">
             <input type="text" name="usedExp"  class="layui-input" >
         </div>
     </div>
     <div class="layui-form-item">
         <div class="layui-input-inline">
             <textarea name="role" class="layui-textarea"></textarea>
         </div>
         <div class="layui-input-inline">
             <div class="layui-upload">
                 <button type="button" class="layui-btn" id="test1">上传图片</button>
                 <div class="layui-upload-list">
                     <img class="layui-upload-img" id="demo1">
                     <p id="demoText"></p>
                 </div>
                 <div style="width: 95px;">
                     <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                         <div class="layui-progress-bar" lay-percent=""></div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <div class="layui-form-item">
         <div class="layui-input-block">
             <button id="loginBtn" class="layui-btn" lay-submit lay-filter="add">添加优惠券</button>
         </div>
     </div>
 </form>

 <script>
     layui.use(['upload', 'element', 'layer','form'], function() {
         var $ = layui.jquery
             , upload = layui.upload
             , element = layui.element
             , layer = layui.layer
             , form = layui.form;


         var uploadImg;  // 声明一个全局变量,准备接收上传后异步获取的图像文件名
         //常规使用 - 普通图片上传
         var uploadInst = upload.render({
             elem: '#test1'
             , url: '/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
             , before: function (obj) {
                 //预读本地文件示例，不支持ie8
                 obj.preview(function (index, file, result) {
                     $('#demo1').attr('src', result); //图片链接（base64）
                 });

                 element.progress('demo', '0%'); //进度条复位
                 layer.msg('上传中', {icon: 16, time: 0});
             }
             , done: function (res) {
                 //如果上传失败
                 if (res.code !="1" ){
                     return layer.msg('上传失败');
                 }
                 //上传成功的一些操作
                 //上传成功后收到的完整路径 res.img
                 uploadImg = res.img;

                 $('#demoText').html(''); //置空上传失败的状态
             }
             , error: function () {
                 //演示失败状态，并实现重传
                 var demoText = $('#demoText');
                 demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                 demoText.find('.demo-reload').on('click', function () {
                     uploadInst.upload();
                 });
             }
             //进度条
             , progress: function (n, elem, e) {
                 element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                 if (n == 100) {
                     layer.msg('上传完毕', {icon: 1});
                 }
             }
         });

         // 表单提交(异步)
         form.on('submit(add)', function(data){

             //获取表单数据并转换为json字符串
             data.field.img = uploadImg;
             delete data.field.file;
             var jsonString = JSON.stringify(data.field);
             console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

             $.ajax({
                 url:"/cpn"
                 ,method:"post"
                 ,headers:{handlerType:"add"}
                 ,data:{formData:jsonString}  // {phone:"",pwd:""}
                 ,dataType:"json"
                 ,success:function(res){
                     console.log(res)
                     if(res.code == 1){
                         layer.confirm("优惠券添加成功", {
                             btn: ['确定'] //可以无限个按钮
                         });
                     }else{
                         layer.msg(res.msg)
                     }
                 }
             })
             return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
         });
     })
 </script>

</body>
</html>